<template>
  <Layout>
    <Form ref="form1" :model="form1" :label-width="120">

      <Row class="query-form" style="padding-top: 15px">
        <Col span="8">
          <FormItem label="审计计划：">
            <Cascader style="width: 100%;" :data="planList" :value="planData" change-on-select @on-change="selectPlan"></Cascader>
          </FormItem>
        </Col>
        <Col span="8">

        </Col>
        <Col span="8">
          <Button class="ivu-btn-query" icon="md-search" @click="selects">查询</Button>
        </Col>
      </Row>
    </Form>
    <Card dis-hover>
      <Spin fix v-if="groupNumShow">
        <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
        <div>Loading</div>
      </Spin>
      <div ref="groupNum" style="height: 300px;"></div>
    </Card>
    <Card dis-hover>
      <Spin fix v-if="groupGradeShow">
        <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
        <div>Loading</div>
      </Spin>
      <div ref="groupGrade" style="height: 300px;"></div>
    </Card>
    <Card dis-hover>
      <Spin fix v-if="groupGradeColumnShow">
        <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
        <div>Loading</div>
      </Spin>
      <div ref="groupGradeColumn" style="height: 300px;"></div>
    </Card>
    <Modal :title="title" :transfer=false v-model="model1" :width=1200 footer-hide>
      <Table ref='table' :height="tableHeight" no-data-text="没有查询到相关数据！"
             :loading="loading" size="small" border :columns="columns1" :data="dataTable">
      </Table>
      <Row style="margin-right:10px;">
        <Col span="24">
          <Page :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange"
                style="float: right" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray"
                show-total show-sizer show-elevator/>
        </Col>
      </Row>
    </Modal>
  </Layout>
</template>

<script>
import {Api} from '../../../../api/index.js'
import {sessionStorage} from '../../../../common/cacheUtils.js';
import cascaderDom from '../../../../components/cascader-dom.vue';
import echarts from 'echarts';

export default {
  components: {cascaderDom},
  name: "riskStatical",
  data() {
    return {
      title: '',
      jinyu: [],
      planList:[],
      planData:[],
      date: ['', ''],
      loading: false,
      tableHeight: '',
      form1: {},
      type:'',
      pageSizeArray: [10, 20, 50],
      pagedata: {
        total: 0,
        pageSize: 10,
        currentPage: 1,
      },
      groupNumShow: false,
      groupGradeShow: false,
      groupGradeColumnShow: false,
      companyId: sessionStorage('userId').getObject('userId').companyId,
      dataTable: [],
      columns1: [

        {
          title: "序号",
          width: 80,
          align: "center",
          fixed: 'left',
          render: (h, params) => {
            return h('span', params.index + (this.pagedata.currentPage - 1) * this.pagedata.pageSize + 1);
          }
        },
        {
          title: '二级集团',
          minWidth: 280,
          align: 'center',
          key: 'twoOrgName',
        },
        {
          title: '审计单位',
          minWidth: 280,
          align: 'center',
          key: 'orgName',
        },
        {
          title: '审计计划',
          minWidth: 150,
          align: 'center',
          key: 'auditPlanName',
        },
        {
          title: '审计任务',
          minWidth: 150,
          align: 'center',
          key: 'missionName',
        },
        {
          title: '带队',
          minWidth: 80,
          align: 'center',
          key: 'supervisor',
        },
        {
          title: '组长',
          minWidth: 80,
          align: 'center',
          key: 'groupLeaderName',
        },

        {
          title: '成员',
          minWidth: 300,
          align: 'center',
          key: 'membersName',
        },
        {
          title: '基础标准得分',
          minWidth: 150,
          align: 'center',
          key: 'calculationBasicsScore',
        },
        {
          title: '现场标准得分',
          minWidth: 150,
          align: 'center',
          key: 'calculationSceneScore',
        },
        {
          title: '班组标准得分',
          minWidth: 150,
          align: 'center',
          key: 'calculationTeamScore',
        },
        {
          title: '总分',
          minWidth: 150,
          align: 'center',
          key: 'totalScore',
        },
        {
          title: '得分率',
          minWidth: 150,
          align: 'center',
          key: 'scoreRate',

        },
        {
          title: '最终得分',
          minWidth: 150,
          align: 'center',
          key: 'finalScore',

        },
        {
          title: '评级',
          minWidth: 150,
          align: 'center',
          key: 'level',

        }

      ],
      model1: false,
      model2: false,
      buttonDisabled: false,
      InputData: {},
      statistical: {},
      groupNum: [],
      groupGrade: [],
      groupGradeColumn: {},
    }
  },
  async mounted() {
    this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 145;
    // this.query()
    await this.selectCodingSort();

  },
  methods: {
    getPlanAll(){
      let _this = this;
      this.$http.get(Api.getPlanTwoAll).then((res) => {

        _this.planList = res.data.data.problemFeedbackList
      }).catch(e => {
        this.$Message.error("数据获取失败")
      })
    },
    selectPlan(value, selectedData) {

      if (value.length != 0) {
        if (value[0]) {
          this.form1.planTaskId = value[0];
        }
        if (value[1]) {
          this.form1.year = value[1];
        } else {
          delete this.form1.year;
        }
      } else {
        delete this.form1.auditPlanId;
        delete this.form1.year;
      }
    },

      selects() {
      if (this.form1.planTaskId) {
        this.selectGroupNum();
        this.selectGroupGrade();
        this.selectGroupGradeColumn();
      }

    },
    async selectCodingSort() {
      let _this = this;
      this.$http.get(Api.queryTwoJinyuExpert).then((res) => {

        _this.jinyu = res.data.data;
        if (_this.jinyu.length != 0) {
          _this.form1.planTaskId = _this.jinyu[0].auditPlanId;
          this.selects();
        }
      });

      await this.$http.get(Api.getPlanTwoAll).then((res) => {
        _this.planList = res.data.data.problemFeedbackList
        if (_this.planList.length != 0) {
          _this.planData = res.data.data.plan
          _this.form1.planTaskId =  res.data.data.plan[0];
          _this.form1.year = res.data.data.plan[1];
          this.selects();
        }
      }).catch(e => {
        this.$Message.error("数据获取失败")
      })




    },
    setOrgId(data) {
      this.form1.orgId = data[data.length - 1];
    },
    setOrgName(data) {
      this.form1.orgName = data;
    },
    formatDate(date, fmt) {
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
      }
      let o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds()
      };
      for (let k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
          let str = o[k] + '';
          fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padLeftZero(str));
        }
      }
      return fmt;
    },
    padLeftZero(str) {
      return ('00' + str).substr(str.length);
    },
    select() {

    },
    query(name, type) {
      this.loading = true;
      let data = {
        startPage: this.pagedata.currentPage,
        size: this.pagedata.pageSize,

      };
      if (type === '1') {
        this.form1.twoOrgName = name;
        this.form1.level = null;
      } else if (type === '2') {
        this.form1.level = name;
        this.form1.twoOrgName = null;
      }

      data = Object.assign(data, JSON.parse(JSON.stringify(this.form1)));
      let url = Api.queryAuditTwoRank;
      this.$http.get(url, {params: data}).then((res) => {
        this.dataTable = res.data.data.data;
        this.pagedata.total = res.data.data.totalSize;
        this.loading = false;
      }).catch(e => {
        this.$Message.error("数据获取失败")
      })
    },
    reset() {
      this.form1 = {
        orgId: '',
        year: '',
        yearDate: ''
      }
      this.date = ['', ''];
      this.$refs.childOrg.resetCurrentOrg();
    },
    pageChange(pageNum) {
      this.pagedata.currentPage = pageNum;
      this.query();
    },
    pageSizeChange(pageSize) {
      this.pagedata.pageSize = pageSize;
      this.query();
    },

    chartStatistical() {
      this.statistical = {
        companyName: [],
        staffNumber: [],
        isPullateCount: [],
        safeRankOne: [],
        safeRankTwo: [],
        safeRankThree: [],
        safeLevelOne: [],
        safeLevelTwo: [],
        healthDateCount: [],
        manageDateCount: []
      }
      for (var i = 0; i < this.dataTable.length; i++) {
        let item = this.dataTable[i]
        this.statistical.companyName.push(item.orgName)
        this.statistical.staffNumber.push(item.staffNumber)
        this.statistical.isPullateCount.push(item.isPullateCount)
        this.statistical.safeRankOne.push(item.safeRankOne)
        this.statistical.safeRankTwo.push(item.safeRankTwo)
        this.statistical.safeRankThree.push(item.safeRankThree)
        this.statistical.safeLevelOne.push(item.safeLevelOne)
        this.statistical.safeLevelTwo.push(item.safeLevelTwo)
        this.statistical.healthDateCount.push(item.healthDateCount)
        this.statistical.manageDateCount.push(item.manageDateCount)
      }
      let container = echarts.init(this.$refs.envinfoContainer);
      let option = this.getOption();
      container.setOption(option);
      window.onresize = container.resize;
    },


    getOption() {
      let option = {
        tooltip: {	//提示框组件
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {	//图例组件
          data: ['从业人数', '重点排污单位', '安全标准化等级(一级)',
            '安全标准化等级(二级)', '安全标准化等级(三级)',
            '安全文化示范企业(国家级)', '安全文化示范企业(省市级)',
            '职业健康体系认证', '环境管理体系认证']
        },
        color: ['#FD5C50', '#FF9800', '#FDD835', '#40C4FF', '#FF3E80', '#42A5F5', '#FFC310', '#1DE9B6', '#6666CC', '#66CC66'],
        grid: {
          left: '3%',
          right: '3%',
          bottom: '8%',
          containLabel: true,
        },
        dataZoom: [{
          type: 'inside'
        }, {
          type: 'slider',
          textStyle: false
        }],
        xAxis: [
          {
            type: 'category',
            data: this.statistical.companyName,
            axisLabel: {
              interval: 0,
              formatter: function (value) {
                var str = "";
                var num = 6; //每行显示字数
                var valLength = value.length; //该项x轴字数
                var rowNum = Math.ceil(valLength / num); // 行数
                if (rowNum > 1) {
                  for (var i = 0; i < rowNum; i++) {
                    var temp = "";
                    var start = i * num;
                    var end = start + num;
                    temp = value.substring(start, end) + "\n";
                    str += temp;
                  }
                  return str;
                } else {
                  return value;
                }
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '从业人数',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: this.statistical.staffNumber
          },
          {
            name: '重点排污单位',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: this.statistical.isPullateCount
          },
          {
            name: '安全标准化等级(一级)',
            type: 'bar',
            stack: '安全标准化等级',
            emphasis: {
              focus: 'series'
            },
            data: this.statistical.safeRankOne
          },
          {
            name: '安全标准化等级(二级)',
            type: 'bar',
            stack: '安全标准化等级',
            emphasis: {
              focus: 'series'
            },
            data: this.statistical.safeRankTwo
          },
          {
            name: '安全标准化等级(三级)',
            type: 'bar',
            stack: '安全标准化等级',
            emphasis: {
              focus: 'series'
            },
            data: this.statistical.safeRankThree
          },
          {
            name: '安全文化示范企业(国家级)',
            type: 'bar',
            stack: '安全文化示范企业',
            emphasis: {
              focus: 'series'
            },
            data: this.statistical.safeLevelOne
          },
          {
            name: '安全文化示范企业(省市级)',
            type: 'bar',
            stack: '安全文化示范企业',
            emphasis: {
              focus: 'series'
            },
            data: this.statistical.safeLevelTwo
          },
          {
            name: '职业健康体系认证',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: this.statistical.healthDateCount
          },
          {
            name: '环境管理体系认证',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: this.statistical.manageDateCount
          }
        ]
      };
      return option;
    },
    selectGroupGradeColumn() {
      let _this = this;
      _this.groupGradeColumnShow = true;
      let container = echarts.init(this.$refs.groupGradeColumn);
      this.$http.get(Api.queryTwoGroupGradeColumn + _this.form1.planTaskId,{params:{year:this.form1.year}}).then((res) => {
        this.groupGradeColumn = res.data.data;
        let option = this.getGroupGradeColumn();
        container.setOption(option);
        window.onresize = container.resize;
        _this.groupGradeColumnShow = false;
      }).catch(e => {
        this.$Message.error("数据获取失败")
        _this.groupGradeColumnShow = false;
      })
    },
    getGroupGradeColumn() {
      let option = {
        title:{
          text:"各集团评级分布",
          left:'right'
        },
        tooltip: {	//提示框组件
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {	//图例组件
          data: ['A', 'B', 'C', 'D',]
        },
        color: ['#FD5C50', '#FF9800', '#FDD835', '#40C4FF', '#FF3E80', '#42A5F5', '#FFC310', '#1DE9B6', '#6666CC', '#66CC66'],
        grid: {
          left: '3%',
          right: '3%',
          bottom: '8%',
          containLabel: true,
        },
        dataZoom: [{
          type: 'inside'
        }, {
          type: 'slider',
          textStyle: false
        }],
        xAxis: [
          {
            type: 'category',
            data: this.groupGradeColumn.names,
            axisLabel: {
              interval: 0,
              formatter: function (value) {
                var str = "";
                var num = 6; //每行显示字数
                var valLength = value.length; //该项x轴字数
                var rowNum = Math.ceil(valLength / num); // 行数
                if (rowNum > 1) {
                  for (var i = 0; i < rowNum; i++) {
                    var temp = "";
                    var start = i * num;
                    var end = start + num;
                    temp = value.substring(start, end) + "\n";
                    str += temp;
                  }
                  return str;
                } else {
                  return value;
                }
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'A',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: this.groupGradeColumn.a
          },
          {
            name: 'B',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: this.groupGradeColumn.b
          },
          {
            name: 'C',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: this.groupGradeColumn.c
          },
          {
            name: 'D',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: this.groupGradeColumn.d
          },
        ]
      };
      return option;

    },
    selectGroupGrade() {
      let _this = this;
      _this.groupGradeShow = true;
      let container = echarts.init(this.$refs.groupGrade);
      this.$http.get(Api.queryTwoGroupGrade + _this.form1.planTaskId,{params:{year:this.form1.year}}).then((res) => {
        this.groupGrade = res.data.data;
        let option = this.getGroupGrade();
        container.setOption(option);
        container.on("click", onSelect);
        function onSelect(param) {
          event.stopPropagation() // 阻止冒泡
          _this.pagedata = {
            total: 0,
            pageSize: 10,
            currentPage: 1,
          }
          _this.title = param.name
          _this.model1 = true;
          _this.query(param.name,'2');
        }

        window.onresize = container.resize;
        _this.groupGradeShow = false;
      }).catch(e => {
        this.$Message.error("数据获取失败")
        _this.groupGradeShow = false;
      })
    },
    getGroupGrade() {
      let option = {
        title:{
          text:"企业评级分布",
          left:'right'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        color: ['#FD5C50', '#FF9800', '#FDD835', '#40C4FF', '#FF3E80', '#42A5F5', '#FFC310', '#1DE9B6', '#6666CC', '#66CC66'],
        series: [
          {
            name: '数量',
            type: 'pie',
            radius: '75%',
            data: this.groupGrade,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      return option;

    },
    selectGroupNum() {
      let _this = this;
      _this.groupNumShow = true;
      let container = echarts.init(this.$refs.groupNum);
      this.$http.get(Api.queryTwoGroupNum + _this.form1.planTaskId,{params:{year:this.form1.year}}).then((res) => {
        this.groupNum = res.data.data;
        let option = this.getGroupNum();
        container.setOption(option);
        container.on("click", onSelect);
        function onSelect(param) {
          event.stopPropagation() // 阻止冒泡
          _this.pagedata = {
            total: 0,
            pageSize: 10,
            currentPage: 1,
          }
          _this.title = param.name
          _this.model1 = true;
          _this.query(param.name,'1');
        }

        window.onresize = container.resize;
        _this.groupNumShow = false;
      }).catch(e => {
        this.$Message.error("数据获取失败")
        _this.groupNumShow = false;
      })
    },

    getGroupNum() {
      let option = {
        title:{
          text:"审计企业分布",
          left:'right'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        color: ['#FD5C50', '#FF9800', '#FDD835', '#40C4FF', '#FF3E80', '#42A5F5', '#FFC310', '#1DE9B6', '#6666CC', '#66CC66'],
        series: [
          {
            name: '审计数量',
            type: 'pie',
            radius: '75%',
            data: this.groupNum,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      return option;

    },

  }
}
</script>

<style scoped>
@import '../../../../index.css';

.demo-spin-icon-load {
  animation: ani-demo-spin 1s linear infinite;
}
</style>
